retrieveTodos();

console.log("completeTodo", todoId);

})

.catch(e => {

console.log(e);

})

}

In the callback, we simply call retrieveTodos() which sets the updated todos array as the state.

Rendering a Completed Todo

We want to render a completed todo by having its details striked through (fig. 1).

Figure 1

To do so, we add the below codes into todos-list.js:

Modify Bold Code

…

{todos.map((todo) => {

return (

<Card key={todo.id} className="mb-3">

<Card.Body>

<div className={`${todo.completed ? "text-decoration-line-through" : ""}`}>

<Card.Title>{todo.title}</Card.Title>

<Card.Text><b>Memo:</b> {todo.memo}</Card.Text>

<Card.Text>

Date created: {moment(todo.created).format("Do MMMM YYYY")}

</Card.Text>

</div>

…

If todo.completed is true, we add the line through text decoration to the div that contains the title, memo and date

created. For uncompleted todos, render them normally (fig. 2).

Figure 2

Next, we also want to disable editing of a completed todo. Only uncompleted todos can be edited. We will still

allow deletion of completed todos. To disable editing of a completed todo, add the codes to the Edit link:

Modify Bold Code

…

{todos.map((todo) => {